// 自营拆单前
import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import action from '../../store/actions/selfBeforeOperated';
import {Pagination, message} from 'antd';
import {confirmCollectMoney, postPaymentInfo} from '../../api';
import Header from './Header';
import SelfBeforeOperatedList from './SelfBeforeOperatedList';
import InvoiceInfo from './InvoiceInfo';
import OrderDetails from './OrderDetails';
import PaymentForm from './PaymentForm';


function SelfBeforeOperated(props) {

  useEffect(() => {
    const {GET_SELF_BEFORE_LIST} = props;
    GET_SELF_BEFORE_LIST();
  }, []);

  // 分页改变
  const pageChange = page => {
    const {GET_SELF_BEFORE_LIST} = props;
    GET_SELF_BEFORE_LIST(page);
  };

  // 确认收款
  const tempConfirmCollectMoney = async order_no => {
    await confirmCollectMoney(order_no);
    const {GET_SELF_BEFORE_LIST, current} = props;
    await GET_SELF_BEFORE_LIST(current);
  };

  // 确认退款
  const confirmRefund = (refund_no) => {
    console.log(refund_no);
  };

  // 发票信息开始
  const [InvoiceInfoVisible, setInvoiceInfoVisible] = useState(false);
  const showInvoiceInfo = async (invoice_address_id, user_id, invoice_type) => {
    console.log(invoice_address_id, user_id, invoice_type);
    const {GET_INVOICE_INFO} = props;
    await GET_INVOICE_INFO(invoice_address_id, user_id, invoice_type);
    await showInvoiceInfoModal();
  };

  const showInvoiceInfoModal = () => {
    setInvoiceInfoVisible(true);
  };

  const handleOkInvoiceInfo = e => {
    setInvoiceInfoVisible(false);
  };

  const handleCancelInvoiceInfo = e => {
    setInvoiceInfoVisible(false);
  };
  // 发票信息结束

  // 付款单信息开始
  const [paymentFormVisible, setPaymentFormVisible] = useState(false);
  const [digest, setDigest] = useState('');
  const [id, setId] = useState('');
  const [confirmLoading, setConfirmLoading] = useState(false);
  const showPaymentForm = async id => {
    setId(id);
    await showPaymentFormModal();
  };

  const showPaymentFormModal = () => {
    setDigest('');
    setPaymentFormVisible(true);
  };

  const handleOkPaymentForm = async (e) => {

    e.preventDefault();
    if (digest) {
      setConfirmLoading(true);
      // 接口处理
      postPaymentInfo(id, digest).then(res => {
        const {GET_SELF_BEFORE_LIST, current} = props;
        GET_SELF_BEFORE_LIST(current).then(res => {
          setPaymentFormVisible(false);
          setConfirmLoading(false);
        });
      }).catch(err => {
        console.log(err);
      });
    } else {
      message.error('摘要不能为空...');
    }
  };

  const handleCancelPaymentForm = e => {
    setPaymentFormVisible(false);
  };

  // 付款单信息结束

  // 订单详情开始
  const [orderDetailsVisible, setOrderDetailsVisible] = useState(false);
  const showOrderDetails = async order_no => {
    const {GET_ORDER_DETAILS} = props;
    await GET_ORDER_DETAILS(order_no);
    await showOrderDetailsModal();
  };
  const showOrderDetailsModal = () => {
    setOrderDetailsVisible(true);
  };
  const handleOkOrderDetails = () => {
    setOrderDetailsVisible(false);
  };
  const handleCancelOrderDetails = () => {
    setOrderDetailsVisible(false);
  };
  // 订单详情结束

  return (
    <div>

      <Header/>

      <SelfBeforeOperatedList
        SelfBeforeOperatedList={props.SelfBeforeOperatedList}
        showInvoiceInfo={showInvoiceInfo}
        showOrderDetails={showOrderDetails}
        showPaymentForm={showPaymentForm}
        confirmCollectMoney={tempConfirmCollectMoney}
        confirmRefund={confirmRefund}
      />

      <Pagination
        current={props.current}
        onChange={pageChange}
        total={props.pageCount ? props.pageCount : 1}
        style={{textAlign: 'center', marginTop: '20px'}}
        pageSize={10}
        hideOnSinglePage
      />

      <InvoiceInfo
        showModal={showInvoiceInfoModal}
        handleOk={handleOkInvoiceInfo}
        handleCancel={handleCancelInvoiceInfo}
        visible={InvoiceInfoVisible}
        invoiceInfo={props.invoiceInfo}
      />

      <PaymentForm
        digest={digest}
        setDigest={setDigest}
        showModal={showPaymentFormModal}
        handleOk={handleOkPaymentForm}
        handleCancel={handleCancelPaymentForm}
        visible={paymentFormVisible}
        confirmLoading={confirmLoading}
      />

      <OrderDetails
        showModal={showOrderDetails}
        handleOk={handleOkOrderDetails}
        handleCancel={handleCancelOrderDetails}
        visible={orderDetailsVisible}
        orderDetais={props.orderDetais}
      />

    </div>
  );
}

const mapSatteToProps = state => state.selfBeforeOperated;

export default connect(mapSatteToProps, action)(SelfBeforeOperated);
